<section class="app-page user-select-none">
  <header class="header">
    <div class="header-top">
      <a href="https://github.com/xjh22222228/nav" target="_blank" class="logo">
        <img src="assets/icon/logo.png" alt="logo">
      </a>
      <div class="open" [class.active]="open" (click)="handleToggleOpen()">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <nav class="nav-open">
      <div 
        *ngFor="let item of nav; let i = index;" 
        (click)="handleCilckNav(i)" 
        [class.active]="page === i" 
        class="nav-title">
        {{ item.title }}
      </div>
    </nav>
  </header>
  
  <div class="wrapper">
    <nav class="children-nav" *ngIf="nav[page].nav.length > 1">
      <a
        class="tag" 
        *ngFor="let item of nav[page].nav; let i = index" 
        [class.active]="id === i" 
        (click)="handleSidebarNav(i)"
      >
        {{ item.title }}
      </a>
    </nav>
    <ul>
      <li *ngFor="let item of nav[page].nav[id].nav">
        <h2 class="block-title" *ngIf="item.subtitle">{{ item.subtitle }} x {{ item.nav.length }}</h2>
        <div class="row">
          <div class="item-list" *ngFor="let el of item.nav; index as i;">
            <a (click)="handleToWebsite(el, i, $event)" href="javascript:;">
              <div class="top">
                <img [src]="el.icon" alt="icon" class="icon">
                <em class="name" [title]="el.name">{{ el.name }}</em>
              </div>
              <div class="desc" [title]="el.desc">{{ el.desc }}</div>
            </a>
            <div class="bottom-slide">
              <div class="wrapper-button" *ngIf="el.language && el.language.length">
                <a [href]="el.link" *ngIf="el.language.length <= 3 && (!el.language[0] || !el.language[1])" target="_blank">默认</a>
                <a [href]="el.language[0]" *ngIf="el.language[0]" target="_blank">en</a>
                <a [href]="el.language[1]" *ngIf="el.language[1]" target="_blank">cn</a>
                <a [href]="el.language[2]" *ngIf="el.language[2]" target="_blank">git</a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>